<template>
  <div class="app-container home">
    <el-card class="introduce">
      <div class="order">
        <el-card class="order-item bg-course">
          <template #header>
            <div class="card-header" @click="linkTo('course/testTeachSchedule')">
              <div class="info">
                <div class="tit">课程日历</div>
                <div class="desc">{{today}}</div>
              </div>
              <div class="icon-img"><img src="../assets/images/home/home_ico_kcrl.png" alt="" /></div>
            </div>
          </template>
          <div class="item">+ 更多</div>
        </el-card>
        <el-card class="order-item bg-test">
          <template #header>
            <div class="card-header " @click="linkTo('couto/testTimeTable/list')">
              <div class="info">
                <div class="tit">总实验计划</div>
                <div class="desc">{{dataCount.jfTestSize}}</div>
              </div>
              <div class="icon-img"><img src="../assets/images/home/home_ico_zsyjh.png" alt="" /></div>
            </div>
          </template>
          <div class="item">+ 更多</div>
        </el-card>
        <el-card class="order-item bg-course-count">
          <template #header>
            <div class="card-header " @click="linkTo('course/testTeachScheduleTable')">
              <div class="info">
                <div class="tit">实验排课总数</div>
                <div class="desc">{{dataCount.jfCourseTablesSize}}</div>
              </div>
              <div class="icon-img"><img src="../assets/images/home/home_ico_sykczs.png" alt="" /></div>
            </div>
          </template>
          <div class="item">+ 更多</div>
        </el-card>
        <el-card class="order-item bg-open-count">
          <template #header>
            <div class="card-header " @click="linkTo('open/courseCertificate')">
              <div class="info">
                <div class="tit">已开出实验课程总数</div>
                <div class="desc">{{dataCount.openCourseSize}}</div>
              </div>
              <div class="icon-img"><img src="../assets/images/home/home_ico_kcsyzkc.png" alt="" /></div>
            </div>
          </template>
          <div class="item">+ 更多</div>
        </el-card>
        <el-card class="order-item bg-unopen-count">
          <template #header>
            <div class="card-header" @click="linkTo('open/courseCertificate')">
              <div class="info">
                <div class="tit">未开出实验课程总数</div>
                <div class="desc">{{dataCount.notOpenCourseSize}}</div>
              </div>
              <div class="icon-img"><img src="../assets/images/home/home_ico_wkcrzs.png" alt="" /></div>
            </div>
          </template>
          <div class="item">+ 更多</div>
        </el-card>
      </div>
      <div id="zoom"></div>
    </el-card>
    <!-- <el-row :gutter="20">
      <div style="display:flex;width:100%;aline-item:center;min-height:420px"> 
        <div :sm="8" :lg="8"  class="echarbox">
          <div class="chart-wrapper" >
            <pie-chart />
          </div>
        </div>
        <div :sm="8" :lg="8" class="echarbox">
          <div class="chart-wrapper" >
            <test-chart />
          </div>
        </div>
        <div :sm="8" :lg="8" class="echarbox">
          <div class="chart-wrapper" >
            <bar-chart />
          </div>
        </div>
      </div>
    </el-row> -->
    <el-row :gutter="20">
      <div style="display:flex;width:100%;aline-item:center;min-height:420px"> 
        <el-col :sm="8" :lg="8" style="flex:1" class="echarbox">
          <el-card class="chart-wrapper">
            <!-- <div class="top-title">
              <div>实验开出率</div>
              <div class="btn-search top-title" @click="showDialog()">
                <span>筛选</span>
                <img class="down-icon" src="../assets/images/arrow down.png" alt="">
              </div>
            </div>
            <pie-chart /> -->
            <pie-chart :list="provinceList" @updataArea="updataArea" />
          </el-card>
        </el-col>

        <el-col  :sm="8" :lg="8" style="flex:1;" class="echarbox">
          <el-card class="chart-wrapper">
            <!-- <div class="top-title">
              <div>学校实验开出率</div>
              <div class="btn-search top-title" >
                <span>筛选</span>
                <img class="down-icon" src="../assets/images/arrow down.png" alt="">
              </div>
            </div> -->
            <test-chart :courseArea="courseArea" :list="provinceList" @updataSchool="updataSchool" />
          </el-card>
        </el-col>
        <el-col  :sm="8" :lg="8" style="flex:1" class="echarbox">
          <el-card class="chart-wrapper">
            <!-- <div class="top-title">
              <div>高中阶段</div>
              <div class="btn-search top-title" >
                <span>筛选</span>
                <img class="down-icon" src="../assets/images/arrow down.png" alt="">
              </div>
            </div> -->
            <bar-chart :schoolId="schoolId" />
          </el-card>
        </el-col>
      </div>
      

    </el-row>
     <el-row :gutter="20">
       <el-col :sm="24" :lg="12" >
        <el-card class="chart-wrapper">
           <div class="top-title">
            地区开出率
          </div>
          <RegionalRate />
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="12" >
        <el-card class="chart-wrapper">
           <div class="top-title">
          学校开出率
          </div>
         <SchoolRate />
        </el-card>
      </el-col>
     </el-row>
         <el-row :gutter="20">
       <el-col :sm="24" :lg="12" >
        <el-card class="chart-wrapper">
           <div class="top-title">
            学科开出率
          </div>
          <SubjectRate />
        </el-card>
      </el-col>
      <el-col :sm="24" :lg="12" >
        <el-card class="chart-wrapper">
           <div class="top-title">
          学段开出率
          </div>
          <PeriodRate />
        </el-card>
      </el-col>
     </el-row>
  </div>
</template>

<script setup name="Index" lang="ts">
import PieChart from "./home/pieChart.vue";
import testChart from "./home/testChart.vue";
import BarChart from "./home/barChart.vue";
import  SubjectRate from"./home/subjectRate.vue"
import  RegionalRate from"./home/regionalRate.vue"
import  PeriodRate from"./home/periodRate.vue"
import  SchoolRate from"./home/schoolRate.vue"
import { getCountData,finProvinceList,finDistrictList } from '@/api/core/home';
import { update } from "@/api/workflow/model/index";
const router = useRouter();
// import { CountDataVO, } from '@/api/core/home/types';
const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
const today = weekdays[new Date().getDay()];
// const data = ref<ChartSchoolVO[]>([]);
const provinceList = ref([]);//省市数据
const courseArea = ref<string|number>();//筛选省市
const schoolId = ref<string|number>();//筛选学校

interface data {
  // deptId: number | string;
  // deptName: string;
  // children: DeptOptionsType[];
  jfTestSize: number | string;//总实验计划数量
  jfCourseTablesSize: number | string; //总实验课程数量
  openCourseSize: number | string;//开课数量
  notOpenCourseSize: number | string;//未开课数量
}
const dataCount = ref<data[]>([]);; //学校

const updataArea = async (e) => {
  courseArea.value = e;
  console.log('====修改区域',e)
}
const updataSchool = async (e) => {
  schoolId.value = e;
  console.log('====传回父组件的学校id',e)
}

const getData = async () => {
  // loading.value = true;
  const res = await getCountData();
  dataCount.value = res.data.jfTestSize ? res.data: {
    jfTestSize:0,
    jfCourseTablesSize:0,
    openCourseSize:0,
    notOpenCourseSize:0
  }
  console.log('统计数据',res.data);
  // data.value = res.rows;
  // total.value = res.total;
  // loading.value = false;
}
const getProvinceList = async ()=>{
  const res = await finProvinceList()
  provinceList.value = res.data
  console.log('省市数据',provinceList.value);
}
const linkTo = (path)=>{
  router.push({ path: path });
}
onMounted(() => {
  getData();
  getProvinceList();
});

</script>

<style scoped lang="scss">
.home {
  .introduce .order {
    display: flex;
    // margin-bottom: 50px;
  }
  .bg-course{
    background: #FFEFF1;
  }
  .bg-test{
    background: #E5EDFF;
  }
  .bg-course-count{
    background: #ECE5FF;
  }
  .bg-open-count{
    background: #E7FFF4;
  }
  .bg-unopen-count{
    background: #FFF5EE;
  }
  .introduce .order .order-item {
    flex: 1;
    margin-right: 20px;
    padding: 10px 4px 15px;
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .info {
        flex: 1;
        margin-right: 20px;
        .tit {
          font-size: 14px;
          color: #141414;
          line-height: 20px;
        }
        .desc {
          margin-top: 12px;
          font-size: 32px;
          color: #141414;
          line-height: 45px;
        }
      }
      .icon-img {
        width: 80px;
        height: 80px;
        border-radius: 50%;
      }
    }
    .item {
      width: 56px;
      height: 24px;
      line-height: 24px;
      border-radius: 13px;
      border: 1px solid #999999;
      text-align: center;
      font-size: 12px;
      color: #999999;
      line-height: 24px;
    }
  }
  .introduce .order .order-item:last-child {
    margin-right: 0;
  }
  .chart-wrapper{
    margin-top: 20px;
    background: #fff;
  }
}
:deep(.el-form--inline .el-select){
  width: 180px !important;
}
// :deep(.el-input){
//   width: 160px !important;
// }
:deep(.pagination-container .el-pagination){
left: unset;
right: 0;
transform: translateX(0);
}
.echarbox{
  flex:1;margin: 0 10px;
  .chart-wrapper{
    background: #ffffff;
    border-radius: 12px;
  }
}
.top-title{
  font-size: 20px;
  color: #141414;
  line-height: 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .btn-search{
    font-size: 14px;
    color: #999999;
    padding: 0 10px;
    width: 100px;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    .down-icon{
      width: 12px;
      height: 6px;
    }
  }
}
</style>
